import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

Vue.use(VueRouter);

// 有name 表示要在左侧导航展示的，没有的表示不展示，同时name用来做路由跳转
// 父子路由都不想展示直接可以使用hideInMenu，
// 有name的并且只想展示其父路由而不想展示其子路由可以使用 hideChildrenInMenu
const routes = [
  {
    path: "/",
    component: () => import("../layouts/BasicLayout"),
    redirect: { name: "dashboard" },
    children: [
      {
        path: "dashboard",
        name: "dashboard",
        component: () => import("../views/Dashboard/index"),
        redirect: { name: "analysis" },
        meta: { icon: "dashboard", title: "仪表盘" },
        children: [
          {
            path: "analysis",
            name: "analysis",
            component: () => import("../views/Dashboard/Analysis"),
            meta: { title: "分析页" }
          }
        ]
      },
      {
        path: "form",
        name: "form",
        component: () => import("../views/Form/index"),
        redirect: { name: "basic-form" },
        meta: { icon: "form", title: "表单" },
        children: [
          {
            path: "basic-form",
            name: "basic-form",
            meta: { title: "基础表单" },
            component: () => import("../views/Form/BasicForm")
          },
          {
            path: "step-form",
            name: "step-form",
            // component: () => import("../views/Form/StepForm/index"),
            component: { render: h => h("router-view") }, // 只提供一个router-view时可以使用 jsx方式简单明了
            redirect: { name: "info" },
            hideChildrenInMenu: true,
            meta: { title: "分布表单" },
            children: [
              {
                path: "info",
                name: "info",
                component: () => import("../views/Form/StepForm/Info")
              },
              {
                path: "confirm",
                name: "confirm",
                component: () => import("../views/Form/StepForm/Confirm")
              },
              {
                path: "result",
                name: "result",
                component: () => import("../views/Form/StepForm/Result")
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: "/user",
    name: "user",
    redirect: { name: "login" },
    hideInMenu: true,
    //webpackChunkName:这是webpackChunkName打包时候用的，你可以理解为它是给webpack的标志，打包的时候会把相同name标志的路由文件打包进一个文件中
    component: () =>
      import(/* webpackChunkName: "layouts" */ "../layouts/UserLayout.vue"),
    children: [
      {
        path: "login",
        name: "login",
        component: () =>
          import(/* webpackChunkName: "login" */ "../views/User/Login.vue")
      },
      {
        path: "register",
        name: "register",
        component: () =>
          import(
            /* webpackChunkName: "register" */ "../views/User/Register.vue"
          )
      }
    ]
  },
  {
    path: "*",
    name: "notFound",
    hideInMenu: true,
    component: () => import("../views/NotFound")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

// 利用路由守卫，在路由跳转前和跳转后进行动画过渡条提示
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

router.afterEach(() => {
  NProgress.done();
});

export default router;
